<template>
  <el-select v-model="selectedItems" filterable clearable multiple style="width: 100%" :filter-method="filterMethod" :loading="listLoading" placeholder="请选择标签">
    <el-option v-for="item in list" :key="item.id" :label="item.name" :value="item.name" />
  </el-select>
</template>

<script>
import { listTag } from '@/api/movie-tags'

export default {
  name: 'MovieTagSelect',
  model: {
    prop: 'value',
    event: 'change'
  },
  props: {
    value: {
      type: Array,
      default: null
    }
  },
  data() {
    return {
      listLoading: false,
      list: [],
      filters: {
        name: ''
      }
    }
  },
  computed: {
    selectedItems: {
      get() {
        return this.value
      },
      set(newValue) {
        this.$emit('change', newValue === '' ? null : newValue)
      }
    }
  },
  mounted() {
    this.loadPageList()
  },
  methods: {
    loadPageList() {
      this.listLoading = true
      const param = { ...this.filters }
      listTag(param).then(({ success, message, data }) => {
        this.listLoading = false
        if (success) {
          this.list = data
        } else {
          this.$message({
            message: message || '查询列表失败',
            type: 'error'
          })
        }
      }, () => {
        this.listLoading = false
      })
    },
    filterMethod(v) {
      this.filters.name = v
      this.loadPageList()
    },
    getValue() {
      return this.value
    }
  }
}
</script>

<style scoped>

</style>
